<template>
    <div>
        <Pop :target="popTarget" @close="popTarget = null" class="pop"/>
        <BarHead />
        <div id="main">
            <div id="side">
                <BarSide v-on:chg-catalog="chgCatalog($event);" />
            </div>
            <Container :catalog="catalog" v-on:pop="popHandler" />
        </div>
    </div>
</template>

<script>
import Pop from '@/components/Pop';
import BarHead from '@/components/BarHead';
import BarSide from '@/components/BarSide';
import Container from '@/components/Container';

export default {
    components: {
        Pop,
        BarHead,
        BarSide,
        Container
    },
    data: function() {
        return {
            catalog: null,
            popTarget: null
        }
    },
    methods: {
        chgCatalog: function(catalog) {
            this.catalog = catalog;
        },
        popHandler: function(target) {
            console.log('index');
            console.log(target);
            this.popTarget = target;
        }
    }
};
</script>

<style scoped>
.pop {
    position: absolute;
}

#head_bar {
    display: flex;
    flex-flow: row;
}

#main {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
}
</style>
